<template>

  <div class="box loginBox">
    <!--  导航头 start  -->
    <van-nav-bar
      title="登录"
      left-text="返回"
      right-text="去注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 导航头 end -->
    <!-- Tab 标签页 start-->
    <van-tabs v-model="active" animated>
      <van-tab  title='用户名登录'>
       <!-- 表单组件 start-->
       <van-form @submit="onSubmit1">
         <van-field
           v-model="username"
           name="username"
           placeholder="用户名"
           :rules="[{ required: true, message: '用户名有误', validator: unTest }]"
         />
         <!-- 必须输入，否则报错，报错提示信息 -->
         <van-field
           v-model= "password1"
           type= "password"
           name= "password1"
           placeholder= "密码"
           :rules="[{ required: true, message: '密码有误', validator: pw1Test }]"
         />
         <div style="margin: 16px;">
           <van-button round block type="info" native-type="submit">登录</van-button>
         </div>
       </van-form>
       <!-- 表单组件 end-->
      </van-tab>
      <van-tab title='手机号登录'>
        <!-- 表单组件 start-->
        <van-form @submit="onSubmit2">
          <van-field
            v-model="tel"
            name="tel"
            placeholder="手机号"
            :rules="[{ required: true, message: '手机号有误', validator: telTest }]"
          />
          <van-field
            v-model= "password2"
            type= "password"
            name= "password2"
            placeholder= "密码"
            :rules="[{ required: true, message: '密码有误', validator: pw2Test }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
        <!-- 表单组件 end-->
      </van-tab>
    </van-tabs>
    <!-- Tab 标签页 end-->

  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Tab, Tabs, Form, Button, Field, Toast } from 'vant'
import { login } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Form)
Vue.use(Button)
Vue.use(Field)
Vue.use(Toast)

export default {
  data () {
    return {
      // 默认显示下标为0的登录方式
      active: 0,
      username: '',
      password1: '',
      tel: '',
      password2: ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.push('/register')
    },
    // 第一个表单提交时，调用的方法
    onSubmit1 (val) {
      const that = this
      // console.log(val)// {username: "1", password1: "1"}
      // 1.去调用登录接口
      login({
        username: val.username,
        password: val.password1
      }).then(data => {
        console.log(data.data)
        // 根据code值来判断，状态，来个轻提示
        switch (data.data.code) {
          case 202:
            Toast('密码不正确')
            break
          case 200:
            // 1.存储些数据：
            // 登录状态（token），存在sessionStorage.setItem('token')关闭浏览器，重新登。
            sessionStorage.setItem('token', data.data.token)
            // 用户id（userId）
            sessionStorage.setItem('userId', data.data.msg)
            // 前端的临时的登录状态，比如custoI：isLogin:ok (不用每次验证都走后端，前端可以做个验证)
            // 但是涉及敏感操作时还是要走后端验证
            sessionStorage.setItem('isLogin', 'ok')
            // 2.轻提示
            Toast({
              message: '账号登录成功',
              onClose () {
                that.$router.push('/home')
              }
            })
            break
          case 201:
            Toast('该用户没注册')
            break
        }
      })
    },
    // 第二个表单提交时，调用的方法
    onSubmit2 (v) {
      const that = this
      login({
        tel: v.tel,
        password: v.password2
      }).then(data => {
        console.log(data.data)
        // 根据code值来判断，状态，来个轻提示
        switch (data.data.code) {
          case 202:
            Toast('密码不正确')
            break
          case 200:
            // 1.存储些数据：
            // 登录状态（token），存在sessionStorage.setItem('token')关闭浏览器，重新登。
            sessionStorage.setItem('token', data.data.token)
            // 用户id（userId）
            sessionStorage.setItem('userId', data.data.msg)
            // 前端的临时的登录状态，比如custoI：isLogin:ok (不用每次验证都走后端，前端可以做个验证)
            // 但是涉及敏感操作时还是要走后端验证
            sessionStorage.setItem('isLogin', 'ok')
            // 2.轻提示
            Toast({
              message: '手机号登录成功',
              onClose () {
                that.$router.push('/home')
              }
            })
            break
          case 201:
            Toast('该用户没注册')
            break
        }
      })
    },
    telTest () {
      return /^1[3-9]\d{9}$/.test(this.tel)
    },
    pw2Test () {
      return /^.{1,10}$/.test(this.password2)
    },
    // 校验用户名是否正确输入？
    // 校验规则跟注册的时候要一致
    unTest () {
      // 校验函数返回 true 表示校验通过，false 表示不通过
      return /^.{1,10}$/.test(this.username)
    },
    // 校验密码是否正确输入？
    // 校验规则跟注册的时候要一致
    pw1Test () {
      return /^.{1,10}$/.test(this.password1)
    }
  }
}
</script>

<style lang="scss">
.loginBox{
  background: url(../../../public/img/3.webp) no-repeat, url(../../../public/img/a.png) no-repeat;
  background-color: #EEEEEE;
  .van-tabs__content{
   width: 320px;
    margin: 30px auto;
    .van-cell {
      border-radius: 28px;
      margin: 15px 0px;
    }
  }
}
</style>
